<template>
    <div class="about">
        <div class="bannder">
            <img src="https://img601.yun300.cn/repository/image/b4eb80d3-446d-4fef-865e-d22a130c8317.jpg?tenantId=215997&viewType=1&k=1642041118000"
                alt="">
        </div>
        <div class="top">
            <div class="title">
                土地脉络
            </div>
            <div class="txt">
                汤臣一品，陆家嘴。尖陆家嘴●未来世界的中心
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <!-- 判断当前下标是不是2的倍数,来决定显示0的内容还是1的内容 -->.
                <!-- 0 -->
                <div class="listitem1 itmebox" v-if="index % 2 == 0">
                    <div class="time" style="text-align: right;">
                        {{ item.time }}
                    </div>
                    <div class="borderbox">
                        <div class="border"></div>
                        <div class="xian"></div>
                    </div>
                    <div class="name" style="text-align: left;">
                        <div class="color">
                            {{ item.name }}
                        </div>
                        <div class="txt">
                            {{ item.txt2 }}
                        </div>
                    </div>
                </div>
                    <!-- 1 -->
                <div class="listitem2 itmebox" v-else>
                    <div class="name" style="text-align: right;">
                        <div class="color">
                            {{ item.name }}
                        </div>
                        <div class="txt">
                            {{ item.txt2 }}
                        </div>
                    </div>
                    <div class="borderbox">
                        <div class="border"></div>
                        <div class="xian"></div>
                    </div>
                    <div class="time" style="text-align: left;">
                        {{ item.time }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// @ is an alias to /src

export default {
    data() {
        return {
            list: [
                {
                    time: '至2040',
                    name: '上海要建成卓越的全球城市',
                    txt2: '陆家嘴将定位综合商务观光休闲中心、中国乃至亚太经济中枢、艺术时尚之都等多项角色',
                },
                {
                    time: '2020',
                    name: '全玻璃穹顶入户大堂，回家之前的礼遇',
                    txt2: '',
                },
                {
                    time: '2010',
                    name: '上海世博会',
                    txt2: '',
                },
                {
                    time: '2009',
                    name: '南汇并入浦东，大浦东战略启动',
                    txt2: '',
                },
                {
                    time: '2008',
                    name: '上海中心开工',
                    txt2: '',
                },
                {
                    time: '2008',
                    name: '环球金融中心落成',
                    txt2: '',
                },
                {
                    time: '2007',
                    name: '陆家嘴金融城规划',
                    txt2: '',
                },
                {
                    time: '2007',
                    name: '汤臣一品竣工',
                    txt2: '',
                },
                {
                    time: '2002',
                    name: '成功申办世博会',
                    txt2: '',
                },
                {
                    time: '2002',
                    name: '成功申办世博会',
                    txt2: '',
                },
                {
                    time: '2001',
                    name: 'APEC会议成功召开',
                    txt2: '',
                },
                {
                    time: '1990',
                    name: '浦东开放开发',
                    txt2: '',
                },
                {
                    time: '20世纪初',
                    name: '外滩万国建筑博览',
                    txt2: '',
                },
                {
                    time: '1404',
                    name: '黄浦江水系形成',
                    txt2: '',
                }
            ]
        }
    },

}
</script>
<style lang="less" scoped>
.bannder {
    width: 100%;
    height: 400px;

    img {
        width: 100%;
        height: 100%;
    }
}

.top {
    margin: 80px auto;
    width: 80%;
    padding-bottom: 60px;

    .title {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .txt {
        font-size: 20px;
    }
}

.item {
    width: 80%;
    margin: 30px auto;

    height: 200px;

    .itmebox {
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .time,
    .name {
        width: 47%;
        box-sizing: border-box;
        padding: 20px 50px;
        height: 200px;

    }

    .color {
        color: #ff9900;
        font-size: 30px;
        margin-bottom: 20px;
    }

    .time {
        font-size: 30px;
    }

    .listitem2 {
        background: #f1f1f1;
    }
.borderbox{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 10px;
}
    .xian {
        width: 1px;
        height: 60%;
        background: #d6d6d6;
        margin-top: 10px;
    }
    .border{
        width: 30px;
        height: 30px;
        border: 5px solid #ff9900;
        border-radius: 50px;
    }
}

.item:hover {
    box-shadow: 0px 10px 10px 5px #d6d6d6;
}</style>